import { useState, useEffect } from 'react';
import { CaretUpOutlined , CaretDownOutlined } from '@ant-design/icons';
import "./index.css"
import AddPerson from "./images/add_person.png"
import AddTeam from "./images/add_team.png";
import Today from "./images/today.png";
import BookSum1 from "./images/book_sum.png";
import { ArrowDownOutlined, ArrowUpOutlined } from '@ant-design/icons';
import LineChart from "./components/TinyArea/TinyArea"
import { apiDataVisualize } from '@/api/api'
import { Statistic } from 'antd';

const DataVisualize = () => {
	const [userSetting, setUserSetting] = useState({})
	useEffect(() => {
		apiDataVisualize().then((res) => {
		  setUserSetting(res.data)
		}  )
	
	}, []);
	console.log(userSetting);
	return (
		<div className="dataVisualize-box">
			<div className="top-content">
				<div className="workHours count-box">
					<div className="count-img">
						<img src={AddPerson} alt="" />
						<div className="weekly-compare">
							<Statistic
							title="周同比"
							value={userSetting.weekYoyUp}
							precision={2}
							valueStyle={userSetting.weekYoyUp>=0 ? {color: '#3f8600'} : { color: '#cf1322' }}
							prefix={userSetting.weekYoyUp>=0 ? <CaretUpOutlined /> : <CaretDownOutlined/>}
							suffix="%"
							/>
						</div>
						<div className="day-compare">
							<Statistic
							title="日环比"
							value={userSetting.dayRatioUp}
							precision={2}
							valueStyle={userSetting.dayRatioUp>=0 ? {color: '#3f8600'} : { color: '#cf1322' }}
							prefix={userSetting.dayRatioUp>=0 ? <CaretUpOutlined /> : <CaretDownOutlined/>}
							suffix="%"
							/>
						</div>
					</div>
					<div className='count-text'>
						<div className='count-work'>
							<div className="count-name">本周投入工时</div>
							<div className="item-value">{userSetting.workTimeWeek}小时</div>
							<div className='count-allWork'>
								<div className="count-name">2023总投入工时</div>&nbsp;&nbsp;
								<div className="count-name">{userSetting.workTime}小时</div>
							</div>
						</div>
					</div>		
				</div>

				<div className="codeQuantity count-box">
					<div className="count-img">
						<img src={AddTeam} alt="" />
						<div className="lineChart"><LineChart/></div>
					</div>
					<div className='count-text'>
						<div className='count-work'>
							<div className="count-name">代码量</div>
							<div className="item-value">{userSetting.codeSum}</div>
							<div className='count-allWork'>
								<div className="count-name">周代码量</div>&nbsp;&nbsp;
								<div className="count-name">{userSetting.codeWeek}行</div>
							</div>
						</div>
					</div>
				</div>

				<div className="dailyReports count-box-dayWeek">
					<div className='count-box-num'>
						<div className="count-img">
							<img src={Today} alt="" />
						</div>
						<div className="count-name">日报条数</div>
					</div>
					<div className="item-value-dayWeek">{userSetting.daysNum}</div>
				</div>

				<div className="weeklyReports count-box-dayWeek">
					<div className='count-box-num'>
						<div className="count-img">
							<img src={BookSum1} alt="" />
						</div>
						<div className="count-name">周报条数</div>
					</div>
					<div className="item-value-dayWeek">{userSetting.weekNum}</div>
				</div>
			</div>
		</div>
	)
}
export default DataVisualize;